<template>
  <div
    :style="{ paddingTop: `${searchBarTop}px` }"
    class="healthreport relative bg-[rgb(215,230,253)] px-34rpx pb-152rpx">
    <!-- 背景图 -->
    <image
      :src="`${cdnUrl}/imgs/healthDetail/reportbg.png${imgVersion}`"
      mode="scaleToFill"
      class="pointer-events-none absolute left-0 right-0 top-0 h-1892rpx w-100%"
    />
    <div class="relative">
      <div class="z-999 mb-16rpx flex items-center justify-between">
        <div class="flex items-center">
          <image
            :src="userStores.user.avatar_url"
            mode="scaleToFill"
            class="mr-34rpx h-68rpx w-68rpx rounded-50%"
          />
          <div class="text-32rpx text-hex-000000">Hi，{{ constitutionList[0]?.user_name }}</div>
        </div>
        <div>
          <!-- <image
            :src="`${cdnUrl}/svgicons/reportShare.svg${imgVersion}`"
            mode="scaleToFill"
            class="h-56rpx w-56rpx"
          /> -->
        </div>
      </div>
      <div
        class="font-alimamaShuHeiTi mb-64rpx text-40rpx font-600 text-hex-333333"
      >
        你的体质报告请查收~
      </div>
    </div>
    <!-- 体质 -->
    <div
      v-for="item in constitutionList"
      class="bgblur60 relative mb-62rpx box-border border-4rpx border-hex-FFFFFF rounded-40rpx border-solid from-hex-F9F9FB to-[rgba(255,255,255,0.6)] bg-gradient-to-b px-32rpx pb-32rpx pt-70rpx">
      <div
        class="boxshadowbtn absolute left-128rpx top--30rpx h-74rpx w-430rpx rounded-80rpx bg-hex-abcd03 text-center text-28rpx font-600 leading-74rpx text-hex-ffffff">
        {{ item.physical_name }}
      </div>
      <div>
        <image
          :src="`${cdnUrl}/imgs/healthDetail/questionmsg.png${imgVersion}`"
          mode="scaleToFill"
          class="h-80rpx w-620rpx"
        />
      </div>
      <div>
        <div class="mb-32rpx ml-12rpx flex items-center text-32rpx font-600 text-hex-333333">
          <text class="mr-24rpx inline-block h-32rpx w-8rpx rounded-b-4rpx rounded-t-4rpx bg-hex-abcd03" />总体特征
        </div>
        <div class="mb-48rpx box-border border-2rpx border-hex-ABCD03 rounded-24rpx border-dotted p-32rpx">
          <div class="text-28rpx tracking-wider text-hex-7C8699">
            {{ item.overall_characteristics }}
          </div>
        </div>
      </div>
      <div>
        <div class="mb-32rpx ml-12rpx flex items-center text-32rpx font-600 text-hex-333333">
          <text class="mr-24rpx inline-block h-32rpx w-8rpx rounded-b-4rpx rounded-t-4rpx bg-hex-abcd03" />形体特征
        </div>
        <div class="mb-48rpx box-border border-2rpx border-hex-ABCD03 rounded-24rpx border-dotted p-32rpx">
          <div class="text-28rpx tracking-wider text-hex-7C8699">
            {{ item.body_characteristics }}
          </div>
        </div>
      </div>
      <div>
        <div class="mb-32rpx ml-12rpx flex items-center text-32rpx font-600 text-hex-333333">
          <text class="mr-24rpx inline-block h-32rpx w-8rpx rounded-b-4rpx rounded-t-4rpx bg-hex-abcd03" />常见表现
        </div>
        <div class="mb-48rpx box-border border-2rpx border-hex-ABCD03 rounded-24rpx border-dotted p-32rpx">
          <div class="text-28rpx tracking-wider text-hex-7C8699">
            {{ item.common_manifestation }}
          </div>
        </div>
      </div>
      <div>
        <div class="mb-32rpx ml-12rpx flex items-center text-32rpx font-600 text-hex-333333">
          <text class="mr-24rpx inline-block h-32rpx w-8rpx rounded-b-4rpx rounded-t-4rpx bg-hex-abcd03" />心理特征
        </div>
        <div class="mb-48rpx box-border border-2rpx border-hex-ABCD03 rounded-24rpx border-dotted p-32rpx">
          <div class="text-28rpx tracking-wider text-hex-7C8699">
            {{ item.psychological_characteristics }}
          </div>
        </div>
      </div>
      <div>
        <div class="mb-32rpx ml-12rpx flex items-center text-32rpx font-600 text-hex-333333">
          <text class="mr-24rpx inline-block h-32rpx w-8rpx rounded-b-4rpx rounded-t-4rpx bg-hex-abcd03" />发病倾向
        </div>
        <div class="mb-48rpx box-border border-2rpx border-hex-ABCD03 rounded-24rpx border-dotted p-32rpx">
          <div class="text-28rpx tracking-wider text-hex-7C8699">
            {{ item.onset_tendency }}
          </div>
        </div>
      </div>
      <div>
        <div class="mb-32rpx ml-12rpx flex items-center text-32rpx font-600 text-hex-333333">
          <text class="mr-24rpx inline-block h-32rpx w-8rpx rounded-b-4rpx rounded-t-4rpx bg-hex-abcd03" />对外界环境适应能力
        </div>
        <div class="mb-48rpx box-border border-2rpx border-hex-ABCD03 rounded-24rpx border-dotted p-32rpx">
          <div class="text-28rpx tracking-wider text-hex-7C8699">
            {{ item.adaptability_to_external_environment }}
          </div>
        </div>
      </div>
    </div>
    <!-- 邀请好友 -->
    <div class="fixed bottom-0 left-0 right-0 z-999">
      <div
        class="bgblur h-152rpx flex items-center justify-between border-4rpx border-transparent border-t-hex-ffffff rounded-t-32rpx border-solid bg-[rgba(249,249,251,0.8)] px-24rpx"
      >
        <div class="ml-30rpx text-center text-20rpx text-hex-29B897"
             @click="goBack">
          <image
            class="block h-48rpx w-48rpx"
            :src="`${cdnUrl}/imgs/healthDetail/fanhui.png${imgVersion}`"
            mode="scaleToFill"
          />
          <div class="text-center text-20rpx text-hex-67686F">返回</div>
        </div>
        <div
          class="btn-normal-bg ml-30rpx box-border h-80rpx rounded-40rpx px-80rpx text-center text-28rpx leading-80rpx"
          @click="navTo('/pages-health/healthDetail')">
          再次测评
        </div>
        <button
          open-type="share" data-name="inviteFriends"
          class="btn-theme-bg box-border h-80rpx rounded-40rpx px-80rpx text-center text-28rpx leading-80rpx">
          邀请好友</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

onShareAppMessage((res) => {
  if (res.from === 'button' && res.target.dataset.name === 'inviteFriends') {
    return {
      title: '欢迎来到心悦健康频道',
      path: '/pages/health',
    }
  }
  return { title: '心悦' }
})
onShareTimeline(() => {
  return {
    title: '分享朋友圈',
  }
})
let reportId: any = $ref('')
let searchBarTop: any = $ref('24')
let questionCategoryId: any = $ref('')
let upPageTitle: any = $ref('')

const userStores = useUserStore()

onLoad((options) => {
  if (options) {
    reportId = options.evaluationId
    questionCategoryId = options.type
  }
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
  const page = getCurrentPages()
  // console.log(page, 'page')

  upPageTitle = page[page.length - 2].route
  // console.log(upPageTitle, 'upPageTitle')
})

const goBack = () => {
  if (upPageTitle === 'pages-health/healthEvaluationRecords' || upPageTitle === 'pages-health/healthReport') {
    uni.reLaunch({
      url: '/pages-health/healthEvaluationRecords',
    })
  } else {
    uni.reLaunch({
      url: '/pages-health/healthProgramme',
    })
  }
}

let constitutionList: any = $ref([])

// 获取体质报告
const getConstitutionList = async () => {
  const reqData = {
    method: 'post',
    data: { evaluation_id: reportId },
  }
  const { data, status } = await Fetch('/api/s/health/physicalReports/get', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  constitutionList = data.result.dataList
  if (constitutionList.length > 3) {
    constitutionList = constitutionList.splice(0, 3)
  }
}


// 生成报告
const handelReport = async () => {
  const reqData = {
    method: 'post',
    data: {
      'evaluationId': reportId,
      'questionCategoryId': questionCategoryId,
    },
  }
  const { data, status } = await Fetch('/qqyapi/health/reports', reqData)
  if (status === 200) {
    getConstitutionList()
  }
}

let physicalStatus: any = $ref('')//体质报告状态
// 获取测评报告的状态
const getReportStatus = async () => {
  if (isNilOrEmpty(reportId)) {
    return
  }
  const reqData = {
    method: 'post',
    data: {
      'id': reportId,
    },
  }
  const { data, status } = await Fetch('/api/s/health/evaluations', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  physicalStatus = data.result.dataList[0].status
  if (physicalStatus === 0) {
    handelReport()
    return
  }
  if (physicalStatus === 1) {
    getConstitutionList()
  }
}

onMounted(() => {
  getReportStatus()
})
</script>

<style lang="scss">
.healthreport{
  .multiLine-hiddle{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .font-alimamaShuHeiTi{
    font-family:alimamaShuHeiTi;
  }

  .font-numberFont{
    font-family:'DingTalk JinBuTi';
  }

  .bgblur60{
    backdrop-filter: blur(45rpx);
  }

  .bgblur{
    backdrop-filter: blur(40rpx);
  }

  .bgblur120{
    filter: blur(120rpx);
  }

  .boxshadow{
    box-shadow: inset 0rpx 4rpx 8rpx 0rpx #B5D2FF;
  }

  .boxshadowbtn{
    box-shadow: 0 4px 4px rgb(51 190 158 / 21%);
  }

  ::v-deep(.uni-swiper-wrapper){
    .uni-swiper-dot{
      width: 30rpx;
      height: 10rpx;
      background: #D9D9D9;
      border-radius: 46rpx;
    }

    .uni-swiper-dots-horizontal {
      left: 50%;
      bottom: 22px;
      text-align: center;
      white-space: nowrap;
      transform: translate(-50%, 0);
    }

    .uni-swiper-dot-active{
      width: 10rpx;
      height: 10rpx;
      background: #ABCD03;
      border-radius: 50%;
    }
  }

  .healthProductRecom{
    // background: linear-gradient(to bottom, rgb(249 251 240), rgb(223 246 249), rgb(216 234 252),rgb(229 236 253));

    .font-alimamaShuHeiTi{
      font-family:alimamaShuHeiTi;
    }
  }
}
</style>
